<template>
  <div class="playIndex" v-if="showScreen">
    <div class="max_box">
      <!-- <div class="blurBg"></div> -->
      <!-- v-if="songMsg&&songMsg.song&&songMsg.song.artists&&songMsg.song.artists[0]" -->
      <div class="full_header" v-if="songMsg&&songMsg.song.artists[0].name&&songMsg.song.artists[0]&&songMsg.song">{{songMsg.name}}:{{songMsg.song.artists[0].name}}</div>
      <!-- 光盘 -->
      <div class="imgBox" @click="AshowScreen">
        <div class="handler" ref="handler" :class="{rotates:!getToggle}"></div>
        <img v-if="songMsg&&songMsg.picUrl" :style="{animationPlayState:getToggle?'running':'paused'}" :src="songMsg.picUrl" alt="">
        <img v-else src="https://s3.music.126.net/mobile-new/img/disc_default.png?ba7c53e25dbac9fe14f024846ddb57d2=" alt="">
      </div>

      <div class="iconfont icon" @click="hiddenFullScreen">&#xeb0a;</div>
      <div v-if="songMsg&&songMsg.picUrl " class="bg_box" :style="{backgroundImage:`url(${songMsg.picUrl }?param=50y50)`}">
      </div>

      <!-- 歌词 -->
      <div class="box">
        <div class="lyricBox" v-if='lyricArr' ref="box1">
          <div class="lyric" :class="{highLight:playIndex==index}" v-for="(item,index) in lyricArr" :key="index">{{item.lyc}}</div>
        </div>
      </div>
      <!--     -->
      <div class="abg_box">
        <!-- 进度条 -->
        <div class="aprogress">
          <div class="ctime">{{time.current}}</div>
          <input @change="sendPercentage" ref='processIpt' :style="{backgroundSize:`${percentage2}% 100%`}" :value="percentage2" type="range" min="0" max="100" />
          <div class="dur">{{time.duration}}</div>
        </div>
        <!-- 控制按钮 -->
        <div class="controlBtn">
          <i class="iconfont listLoop" v-if="mode==1" @click="changeMode(2)">&#xea76;</i>
          <i class="iconfont singleLoop" v-else-if="mode==2" @click="changeMode(3)">&#xea77;</i>
          <i class="iconfont randomPlay" v-else @click="changeMode(1)">&#xea75;</i>
          <i class="iconfont prev" @click="preSong">&#xe78a;</i>
          <i @click="play(false)" style="fontSize:40px;" v-show="getToggle&&songMsg" class="iconfont pause">&#xe685;</i>
          <i @click="play(true)" style="fontSize:40px;" v-show="!getToggle||!songMsg" class="iconfont play">&#xe624;</i>
          <i class="iconfont next" @click="nextSong">&#xe7a5;</i>
          <i class="iconfont showList" @click="showList=true">&#xea83;</i>

        </div>
        <transition enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated  animate__fadeOutDown">
          <ul class="lists" v-show="showList">
            <div class="list_title">当前播放<span>({{allSongMsg.length}})</span></div>
            <i class="iconfont closeBtn" @click="showList=false">&#xe625;</i>
            <li :class="{currentHig:index==currentClick}" v-for="(item,index) in allSongMsg" :key="index"><span @click="jumpSongs(index,item.id)" class="textDesc">{{item.name}}-{{item.song.artists[0].name}}</span> <span @click="popSong(index)" class="iconfont close_song">&#xe8b6;</span></li>

          </ul>
          <!-- {{item.song.artists[0].name}} -->
          <!-- {{item.name}} -->
        </transition>
      </div>
    </div>
  </div>

  <!-- <div class="player_box">
    </div>  -->
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
  components: {},
  created() {},
  filter: {
    highLight(val) {}
  },
  data() {
    return {
      currentClick: '',
      showList: false,
      childNodeHeight: 0,
      togglePlay: '',
      songMsg: {},
      allSongMsg: [],
      lyricArr: [],
      mode: 1,
      //进度条颜色
      customColor: '#c0c4cc'
    };
  },
  methods: {
    //进度更新
    sendPercentage() {
      this.$store.commit('percentage', this.$refs.processIpt.value / 100);
    },
    //删除播放列表歌曲
    popSong(i) {
      this.allSongMsg = this.allSongMsg.filter((val, index) => {
        return index != i;
      });
      if (this.allSongMsg.length == 0) {
        this.songMsg = '';
        this.lyricArr = '';
        this.rotateing = false;
        this.$refs.processIpt.value = 0;
        this.play(false);
        this.$store.commit('setSongsObject', false);
      } else if (this.allSongMsg.length == 1) {
        this.$store.commit('changeMode', 2);
      }
      let currentObj = { currentSongIndex: i - 1, newAllList: this.allSongMsg };

      this.$store.commit('setSongsObject', currentObj);
    },
    //播放列表歌曲播放
    jumpSongs(i, ids) {
      this.currentClick = i;
      let currentSongIndex = this.allSongMsg.findIndex(val => {
        return val.id == ids;
      });
      let currentObj = { currentSongIndex: currentSongIndex, newAllList: this.allSongMsg };
      //显示播放器
      // this.$store.commit('showPlayBox', true);
      this.$store.commit('setSongsObject', currentObj);
    },
    //显示播放列表
    showPlayList() {},
    changeMode(mode) {
      this.mode = mode;
      this.$store.commit('changeMode', mode);
    },
    play(flag) {
      if (this.allSongMsg.length == 0 && flag) {
        alert('请添加歌曲');
      } else {
        this.$store.commit('rotateing', flag);
      }
    },
    preSong() {
      this.$store.commit('changeIndex', 1);
      this.$store.commit('click', true);
    },
    nextSong() {
      this.$store.commit('changeIndex', 2);
      this.$store.commit('click', true);
    },
    hiddenFullScreen() {
      this.$store.commit('fullScreen', false);
    },
    AshowScreen() {
      this.$store.commit('fullScreen', true);
    }
  },
  created() {},
  computed: {
    ...mapGetters(['time']),
    ...mapState(['lyric', 'percentage2', 'reset']),
    processTimes() {
      return this.$store.state.percentage * 100;
    },

    getToggle() {
      return this.$store.state.rotateing;
    },
    playIndex() {
      return this.$store.state.playIndex;
    },

    getSongObject() {
      return this.$store.state.songsObject;
    },
    showScreen() {
      return this.$store.state.fullScreen;
    }
  },
  watch: {
    time(val) {},
    percentage2(val) {},
    mode(val) {
      this.$store.commit('changeMode', val);
    },
    playIndex: {
      deep: true,
      handler: function (val) {
        if (this.$refs.box1 && this.$refs.box1.childNodes) {
          let childNode = this.$refs.box1.childNodes;
          var that = this;
          this.childNodeHeight += window.getComputedStyle(childNode[val]).height.substr(0, 2) - 0;
          if (this.childNodeHeight > 50) {
            // that.$refs.box1.style.transform = `translateY(${-16 * (val - flg)}px)`;
            that.$refs.box1.style.transform = `translateY(${-(this.childNodeHeight - 50)}px)`;
          }
        }
      }
    },
    lyric: {
      deep: true,
      handler: function (val) {
        this.childNodeHeight = 0;
        let resArr = [];
        let arr1 = val.split('\n');
        arr1.forEach(item => {
          if (item != ' ') {
            let arr2 = item.split(']');
            let time = arr2[0].substr(1);
            let lyc = arr2[1];
            resArr.push({ time: time, lyc: lyc });
          }
        });
        this.lyricArr = resArr;
        this.$store.commit('lyricArr', resArr);
      }
    },
    getSongObject: {
      deep: true,
      immediate: false,
      handler: function (val) {
        if (val && val.newAllList) {
          this.songMsg = val.newAllList[val.currentSongIndex];
          this.allSongMsg = val.newAllList;
        }
      }
    }
  }
};
</script>

<style lang="less" scoped>
@keyframes rotatePic {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.ctime {
  position: absolute;
  top: 5px;
  left: -44px;
  color: #f5f7fa;
}
.dur {
  position: absolute;
  top: 5px;
  right: -47px;
  color: #f5f7fa;
}
.close_song {
  position: absolute;
  right: 30px;
}
.textDesc {
  display: inline-block;
  width: 230px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.currentHig {
  color: red;
}
.rotates {
  transition: transform 0.5s linear;
  transform: rotate(329deg) !important;
}
.full_header {
  position: absolute;
  width: 230px;
  height: 50px;
  top: 14px;
  text-align: center;
  z-index: 1;
  left: calc(50% - 125px);
}
.lists {
  z-index: 2;
  height: 220%;
  overflow: auto;
  border-radius: 17px;
  text-align: left;
  position: absolute;
  padding-left: 20px;
  width: 90%;
  margin: 0 auto;
  bottom: 10px;
  left: calc(50% - 45vw);
  color: #7c7979;
  background-color: #ffffff;
  padding-top: 60px;
  li {
    padding: 5px 0;
    width: 100%;
    // border-bottom: 1px solid rgba(1, 1, 1, 0.5);
    position: relative;
    // span {
    //   // position: absolute;
    //   right: 10px;
    //   top: 0;
    //   width: 10px;
    //   height: 10px;
    // }
  }

  .list_title {
    font-size: 20px;
    position: absolute;
    top: 17px;
    color: black;
    span {
      font-size: 12px;
      color: gray;
    }
  }
  .closeBtn {
    position: absolute !important;
    right: 10px;
    top: 17px;
    font-size: 16px;
  }
}
.abg_box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 139px;
  background: transparent;
}
.aprogress {
  position: absolute;
  width: 70vw;
  bottom: 113px;
  left: calc(50% - 35vw);
  .hideBox1 {
    width: 67vw;
    height: 8px;
    position: absolute;
    background-color: black;
  }
  .hideBox2 {
    width: 67vw;
    height: 10px;
    position: absolute;
    bottom: 0;
    background-color: black;
  }
  // input {
  //   display: block;
  //   width: 76vw;
  //   height: 2px;
  // }

  input[type='range'] {
    margin-top: 8px; /*上部分的填充值*/
    outline: none;
    -webkit-appearance: none; /*清除系统默认样式*/
    width: 100% !important;
    background: -webkit-linear-gradient(#ceccc5, #8b897e) no-repeat, rgb(204, 196, 196); /*背景颜色，俩个颜色分别对应上下，自己尝试下就知道了嗯*/
    // background-size: 44% 100%; /*设置左右宽度比例*/
    height: 1px; /*横条的高度，细的真的比较好看嗯*/
  }

  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none; /*清除系统默认样式*/
    height: 5px; /*拖动块高度*/
    width: 5px; /*拖动块宽度*/
    background: #f8f9fa; /*拖动块背景*/
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 1px #ddd; /*设置边框*/
  }
}
.controlBtn {
  align-items: center;
  width: 68%;
  display: flex;
  left: calc(50% - 34%);
  justify-content: space-around;
  position: absolute;
  bottom: 44px;
  .iconfont {
    font-size: 30px;
    color: #f5f7fa;
  }
}

.lyric {
  text-align: center;
  color: #bdbbb7;
}
.highLight {
  color: red;
}
.box {
  position: absolute;
  top: 56%;
  width: 100%;
  height: 20%;
  overflow: auto;
  .lyricBox {
    transition: transform 0.5s linear 0s;
    z-index: 1;
    height: 200px;
    width: 100%;
    display: flex;
    align-content: center;
    color: white;
    display: flex;
    flex-direction: column;
  }
}

.blurBg {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(1, 1, 1, 0.6);
  z-index: 1;
  top: 0;
  left: 0;
}
.imgBox {
  .handler {
    z-index: 1;
    top: -49px;
    left: 85px;
    transform-origin: 0 0;
    transform: rotate(353deg);
    transition: transform 0.5s linear;
    position: absolute;
    height: 115px;
    width: 100px;

    background: url(//s3.music.126.net/mobile-new/img/needle-ab.png?4b81da043356110081e5ccaed2e6f2ad=) no-repeat;
    background-size: contain;
  }
  padding: 40px;
  top: 100px;
  position: absolute;
  background: url(//s3.music.126.net/mobile-new/img/disc-plus.png?b700b62e1971b351dcb8b8ce1c9ceea3=) no-repeat;
  background-position: center;
  background-size: contain;
  left: calc(50% - 105px);
  // padding: 50px;
  z-index: 1;

  img {
    animation: 4s rotatePic linear infinite;
    display: block;
    width: 130px;
    height: 130px;
    border-radius: 100px;
  }
}

.icon {
  font-size: 30px;
  color: gainsboro;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
.max_box {
  padding-top: 100px;
  height: 100%;
  overflow: hidden;
  max-height: 100%;
  position: relative;
}
.player_box {
  width: 247px;
  height: 247px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
body,
html {
  height: 100%;
}
.playIndex {
  background-color: rgb(55 47 47);
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
.bg_box {
  position: relative;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: 848px;
  overflow: hidden;
  /* z-index: 1; */
  filter: blur(30px);
}
.topShadow {
  width: 100%;
  height: 100px;
  background: linear-gradient(0, rgba(0, 0, 0, 0), black);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  filter: blur(4px);
  background-color: red;
}
.bottomShadow {
  width: 100%;
  height: 300px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), black);
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  filter: blur(4px);
}
</style>